<template>
    <div class="user-profile">
        <div class="profile-header">
            <div class="avatar-container">
                <router-link class="login" to="/login">
                    <van-image round width="3rem" height="3em" class="avatar" />
                </router-link>
            </div>
            <div class="user-info">
                <span class="phone-number">138****6523</span>
            </div>
        </div>
        <div class="membership">
            <div class="membership-level">V1里程会员</div>
            <div class="discount-info">折上折 周三打车，已有折扣上再享95折</div>
        </div>
        <div class="menu">
            <div class="menu-item">
                <van-icon name="map-marked" color="#FF9133" size="1.5em" /><br>
                <span @click="newPage()">订单</span>
            </div>
            <div class="menu-item">
                <van-icon name="gold-coin" color="#FF9133" size="1.5em" /><br>
                <span @click="newPage()">钱包</span>
            </div>
            <div class="menu-item">
                <van-icon name="setting" color="#FF9133" size="1.5em" /><br>
                <span @click="newPage('/setting')">设置</span>
            </div>
            <div class="menu-item">
                <van-icon name="service" color="#FF9133" size="1.5em" /><br>
                <span @click="newPage()">客服</span>
            </div>
        </div>
        <van-divider />
        <div class="stats">
            <div class="stat-item" v-for="(stat, index) in stats" :key="index" @click="newPage('/setting')">
                <span>{{ stat.value }}</span>
                <van-icon name="arrow" color="#BBB" size="0.5em"/><br>
                <span>{{ stat.label }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';


let stats = ([
    { value: '5张', label: '优惠卡券', url: '/setting' },
    { value: '0元', label: '车费余额', url: '/setting' },
    { value: '0个', label: '福利金', url: '/setting' },
    { value: '20万', label: '预估可借', url: '/setting' },
]);

const router = useRouter();
const newPage = (url) => {
    router.push(url);
};

</script>

<style scoped>
.user-profile {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}

.profile-header {
    display: flex;
    align-items: center;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-info {
    font-size: 16px;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.phone-number {
    font-size: 16px;
}

.membership {
    background: linear-gradient(to right, #ff5f6d, #ffc371);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.discount-info {
    font-size: 12px;
    margin-top: 5px;
}

.menu {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

.menu-item {
    text-align: center;
}

.menu-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
}

.stats {
    display: flex;
    justify-content: space-around;
}

.stat-item {
    text-align: center;
}
</style>
